Skip to content

Showcase: convert integration tests to gts/gjs #3326

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 69 commits into
base: main
Choose a base branch
from
Open

Showcase: convert integration tests to gts/gjs #3326

wants to merge 69 commits into from

Conversation

@shleewhite
Copy link
Contributor

@shleewhite shleewhite commented Oct 25, 2025 •
edited
Loading

📌 Summary

If merged, this PR updates the component integration tests to use the gts format.

The commits in the PR are organized as follows:

  • run the automation to convert most the tests to gjs (there were a couple that couldn't be automatically converted)
  • add any required devDeps to the showcase to type the tests
  • 1 commit per component where the tests are converted from gjs to gts

The changes include:

  • converting the tests to typescript, which ensures tests are using components correctly
  • switching from hbs wrapper around what the test renders, instead using <template> tags
  • using TrackedObject/Array instead of this.set()
  • moving away from using beforeEach for setting global values and instead defining things within the individual test context
  • I broke up the AdvancedTable index test file into several feature files that are sub-modules of advanced-table/index (this was just to make the file more understandable)
  • standardized how repeated components are rendered, using the precedent set by stepper and tabs (see advanced table, keyvalueinputs, table for examples)
  • added imports for sinon, codemirror in the showcase so tests can be typed correctly

UPDATE
To make the ember matrix tests pass, I had to update the gjs test files to not use this.set anymore.

REVIEWERS
Using the order of commits, you can click the link for the commit of the first component you are supposed to look at and then step through

If your section is looking good - please throw an approval on this PR, otherwise leave a comment.

🔗 External links

Jira ticket: HDS-XXX

👀 Component checklist

  • Percy was checked for any visual regression

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist
  • If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
  • If applicable, I've worked with GRC to document the impact of any changes to security controls.
    Examples of changes to controls include access controls, encryption, logging, etc.
  • If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
    Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

@vercel
Copy link

vercel bot commented Oct 25, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Updated (UTC)
hds-showcase Ready Ready Preview Nov 14, 2025 5:05pm
hds-website Ready Ready Preview Nov 14, 2025 5:05pm

aklkv
aklkv reviewed Oct 26, 2025
View reviewed changes
aklkv
aklkv reviewed Oct 26, 2025
View reviewed changes
@shleewhite shleewhite force-pushed the hds-5557/spike/convert-components-to-gts branch from 4ecc8f2 to 0837240 Compare October 30, 2025 20:55
@shleewhite shleewhite force-pushed the hds-5557/spike/convert-components-to-gts branch from 0837240 to 6055c04 Compare October 30, 2025 21:03
@shleewhite shleewhite force-pushed the hds-5557/spike/convert-components-to-gts branch from 6055c04 to db90285 Compare October 31, 2025 18:42
@shleewhite shleewhite force-pushed the hds-5557/spike/convert-components-to-gts branch from db90285 to 55ee921 Compare November 3, 2025 20:20
@shleewhite shleewhite force-pushed the hds-5557/spike/convert-components-to-gts branch from 55ee921 to b2fcd3e Compare November 3, 2025 22:21
@aklkv
Copy link
Collaborator

aklkv commented Nov 12, 2025

On a side note, I'm still intrigued by the 404s on test-support.css and favicon.ico, but that's a topic for another time.

@alex-ju tests-support.css is a known issue and favicon.ico is just not linked in tests-index.html which is kinda pointless but could be done

didoo
didoo previously approved these changes Nov 13, 2025
View reviewed changes
Copy link
Contributor

@didoo didoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have done my block of tests, and left a few comments. Nothing major, so I am approving it.

showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.gts
await render(
hbs`<Hds::Dropdown::ListItem::Checkbox @id="id" @value="value">Checkbox item</Hds::Dropdown::ListItem::Checkbox>`,
<template>
{{! @glint-expect-error - testing invalid component usage (@id arg doesn't exist) }}
Copy link
Contributor

@didoo didoo Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[question] technically is not invalid, the @id is read by the getElementId function. Does it mean that @id should be declared explicitly in the args definition of the HdsDropdownListItemCheckboxSignature?

(if so, also all the places where we use getElementId with an implicit @id argument?)

Copy link
Contributor Author

@shleewhite shleewhite Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the issue is that you can use id because of attribute forwarding, but there is no defined @id arg on the dropdown listitem checkbox / radio type signature. I wasn't sure if this was an intentional test, like maybe consumers think there is an @id arg or if it was just an incorrect usage of id

Copy link
Contributor

@didoo didoo Nov 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alex-ju what do you think of this case? (we would have a similar problem for some of the Form input elements, no?)

Copy link
Contributor Author

@shleewhite shleewhite Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no, all those tests just use id

showcase/tests/integration/components/hds/dropdown/list-item/radio-test.gts
await render(
hbs`<Hds::Dropdown::ListItem::Radio @id="id" @value="value">Radio item</Hds::Dropdown::ListItem::Radio>`,
<template>
{{! @glint-expect-error - testing invalid component usage (@id arg doesn't exist) }}
Copy link
Contributor

@didoo didoo Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see other comment for the checkbox list item

@shleewhite shleewhite mentioned this pull request Nov 14, 2025
Draft
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@aklkv aklkv aklkv left review comments

@didoo didoo Awaiting requested review from didoo

@KristinLBradley KristinLBradley Awaiting requested review from KristinLBradley

@alex-ju alex-ju Awaiting requested review from alex-ju

@zamoore zamoore Awaiting requested review from zamoore

@dchyun dchyun Awaiting requested review from dchyun

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

showcase

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

7 participants

@shleewhite @aklkv @didoo @alex-ju @dchyun @KristinLBradley @hashibot-hds